import Image from 'next/image';

interface BannerProps {
  pcImage: string;
  mobileImage: string;
  alt: string;
  className?: string;
}

export default function Banner({ pcImage, mobileImage, alt, className = "" }: BannerProps) {
  return (
    <section className="container mx-auto max-w-6xl px-4 pt-4">
      <div className={`relative rounded-xl overflow-hidden ${className}`}>
        {/* PC端banner (750px以上) */}
        <div className="hidden md:block w-full">
          <Image
            src={pcImage}
            alt={alt}
            width={1200}
            height={300}
            className="w-full h-auto object-contain"
            priority
          />
        </div>
        
        {/* 移动端banner (750px以下) */}
        <div className="md:hidden w-full">
          <Image
            src={mobileImage}
            alt={alt}
            width={750}
            height={200}
            className="w-full h-auto object-contain"
            priority
          />
        </div>
      </div>
    </section>
  );
}
